<template>
    <div class="user">
        <div class="card">
            <Grouping class="grouping" :data="arr" :width="300">
                <template #search>
                    <div class="search">
                        <Search :style="{width: '100%'}" placeholder="搜分组" />
                    </div>
                </template>
            </Grouping>
            <div class="card-table">
                <div class="card-header">全部话术</div>
                <div class="card-btn flex-jsb mt16">
                    <div class="flex" style="gap: 12px">
                        <a-button
                            @click="onTalkCourse"
                            style="color: #3070ff"
                            type="primary"
                            ghost
                            :icon="h(PlusOutlined)"
                            >添加话术</a-button
                        >
                        <Search :width="200" placeholder="搜话术" />
                        <a-input-group compact>
                            <a-select v-model:value="value17" style="width: 112px">
                                <a-select-option value="Home">选项1</a-select-option>
                                <a-select-option value="Company">选项2</a-select-option>
                            </a-select>
                        </a-input-group>
                        <a-button>重置</a-button>
                    </div>
                    <div class="flex" style="gap: 12px">
                        <a-button>导出 </a-button>
                        <a-upload
                            v-model:file-list="fileList"
                            name="file"
                            :headers="headers"
                            @change="handleChange"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        >
                            <a-button>
                                <upload-outlined></upload-outlined>
                                导入
                            </a-button>
                        </a-upload>
                        <a-tooltip placement="topLeft" title="仅支持文本话术导入，和导出">
                            <InfoCircleFilled />
                        </a-tooltip>
                    </div>
                </div>
                <!-- 表格 -->
                <a-table
                    class="mt16"
                    :columns="columns"
                    :data-source="list"
                    :rowKey="record => JSON.stringify(record)"
                    :pagination="{
                        showQuickJumper: true,
                        showSizeChanger: false,
                    }"
                >
                    <template #bodyCell="{column, text}">
                        <template v-if="column.dataIndex === 'action'">
                            <div class="sort">
                                <a v-for="(res, index) in text" :key="index">{{ res }}</a>
                            </div>
                        </template>
                        <template v-if="column.dataIndex === 'status'">
                            <a-tag>{{ text }}</a-tag>
                        </template>
                        <template v-if="column.dataIndex === 'number'">
                            <div class="number-title">{{ text.title }}</div>
                            <div class="number-content">
                                {{ text.time }} <a-divider type="vertical" />分组：{{ text.grouping }}
                            </div>
                        </template>
                        <template v-if="['name'].includes(column.dataIndex)">
                            <div class="show-area">
                                {{ text }}
                            </div>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>
        <PopupRight ref="RefChild" :formList="popupMessage" />
    </div>
</template>

<script setup lang="ts">
import {h, reactive, ref} from "vue";
import {message, UploadChangeParam} from "ant-design-vue";
import {PlusOutlined, UploadOutlined, InfoCircleFilled} from "@ant-design/icons-vue";
import {Grouping, Search, PopupRight, Content} from "@/components";

const arr = new Array(1).fill(1).map((item, index) => ({title: `分组${index + 1}`, num: 123, key: index}));
const popupMessage = [
    {
        title: "分组设置",
        type: "select",
        key: "grouping",
        rules: [{required: true, message: "请选择", trigger: "change"}],
        placeholder: "请输入分组名称",
        select: [
            {value: "默认分组", label: "默认分组"},
            {value: "分组1", label: "分组1"},
            {value: "分组3", label: "分组3"},
        ],
        disabled: false,
        val: "默认分组",
    },
    {
        title: "话术标题",
        type: "input",
        key: "speak",
        rules: [
            {required: true, message: "请输入话术标题", trigger: "change"},
            {min: 2, max: 15, message: "最多15个字", trigger: "blur"},
        ],
        placeholder: "标题用于后期查询，最多15个字",
        disabled: false,
        val: "",
    },
    {
        title: "话术内容",
        type: "component",
        key: "verbalTrick",
        disabled: false,
        val: "",
        component: Content,
    },
    {
        type: "button",
        val: "",
        leading: "提交",
        auxiliary: "重置",
    },
];

// 表格
const RefChild = ref();
const onTalkCourse = () => {
    RefChild.value.showDrawer();
};
// 分割

const value17 = ref<string>("Home");
const columns = [
    {
        title: "标题",
        dataIndex: "number",
    },
    {
        title: "话术内容",
        dataIndex: "name",
        // ellipsis: true,
    },
    {
        title: "类型",
        dataIndex: "status",
    },
    {
        title: "操作",
        dataIndex: "action",
    },
];
const list = new Array(4).fill(0).map((item, index) => ({
    name: "您好🤝我是您的专属客服经理上海移动竭诚为您服务~",
    number: {
        title: "自动回复自助查询话术",
        time: "2021-12-08 16:37",
        grouping: "分组" + index,
    },
    status: "文本",
    action: ["查看", "修改", "复制", "删除", "排序"],
}));

const state = reactive({
    selectedRowKeys: [],
});
const handleSelectChange = chooseRow => {
    console.log("selectedRowKeys", chooseRow);
    state.selectedRowKeys = chooseRow;
};

// TODO: 文件上传
const handleChange = (info: UploadChangeParam) => {
    if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList, "上传中");
    }
    if (info.file.status === "done") {
        message.success(`${info.file.name} 完成`);
    } else if (info.file.status === "error") {
        message.error(`${info.file.name} 失败.`);
    }
};

const fileList = ref([]);
const headers = {
    authorization: "authorization-text",
};
</script>

<style scoped lang="less">
.user {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
    .card {
        height: 100%;
        margin-top: 0;
        overflow: hidden;
        padding: 0;
        height: 100%;
        overflow: hidden;
        display: flex;
        background-color: #fff;
        > div {
            height: 100%;
            overflow: hidden;
        }

        .grouping {
            width: 300px;
            border-right: 1px solid #ccc;
            .search {
                width: 100%;
                margin-bottom: 6px;
            }
        }
        .card-table {
            // flex: 1;
            overflow: hidden;
            flex: 1 1;
            background: #fff;
            min-height: 100%;
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 4px 4px 0;
            padding: 16px;
            line-height: 24px;
            .card-header {
                width: 100%;
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: 600;
                color: rgba(0, 0, 0, 0.85);
            }
            .card-btn {
                .ant-input-group {
                    width: 112px;
                }
                .ant-btn {
                    color: #666;
                }
                .ant-upload-wrapper {
                    position: relative;
                    :deep(.ant-upload-list) {
                        position: absolute;
                        z-index: 2;
                        right: 0;
                    }
                }
            }
            .sort {
                display: flex;
                gap: 15px;
            }
            .show-area {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 400px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.85);
            }
            .number-title {
                color: rgba(0, 0, 0, 0.85);
                font-weight: 600;
                font-size: 14px;
            }
            .number-content {
                margin-top: 2px;
                font-size: 13px;
                color: rgba(0, 0, 0, 0.45);
            }
        }
    }
}
</style>
